<script setup lang='ts'>
  import bloggerRight from './blogger-right.vue';
  import {useRouter} from "vue-router"
  
  const  rightIsShow=()=>{
       const arr =["/blogger/content/selfInfo/post","/blogger/content/selfInfo/collection",
       "/blogger/content/selfInfo/attention"
       ,"/blogger/content/selfInfo/fans","/blogger/content/sign","/blogger/content/create",
       "/blogger/content/search"]
       return arr.includes(useRouter().currentRoute.value.path)
    }
   
  </script>
  <template>
  
  <div class="container">
  
  
  <div class="bg-white rounded-full  md:-ml-[60px] p-2 back" 
  v-if="useRouter().currentRoute.value.path=='/blogger/content/show' || rightIsShow()" >
      <router-link :to="{name:'blogger.content.index'}">
    <icon-return theme="outline" size="30" fill="#6d38cc"/> 
   </router-link>
  
  </div>
    <!-- 文章的列表  和  文章点开的具体内容 -->
    <router-view/>
  
    <!-- 右侧right -->
    <bloggerRight/>
        
          <!--返回顶部  -->
          <el-backtop :bottom="100">
      <div
        style="
          height: 100%;
          width: 100%;
          background-color: var(--el-bg-color-overlay);
          box-shadow: var(--el-box-shadow-lighter);
          text-align: center;
          line-height: 40px;
          color: #1989fa;
        "
      >
        <i class="fas fa-arrow-up"></i> 
      </div>
    </el-backtop>
  </div>
  </template>
  <style scoped lang='scss'>
  
   .container{
        @apply w-screen  ml-[20px] md:ml-[120px]  relative   pt-5 md:flex justify-center  items-start;
   
      }
   .back{
     @apply absolute top-10 left-0;
   }
  
  </style>